<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js第一次作业</title>
    <style>
        .wrap{
            position: relative;
            margin:auto;
            width: 500px;
            height: 500px;
        }
        #con-box{
            /* display: flex; */
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid rgb(218, 212, 212);
        }
        #swich-box{
            width: 500px;
            height: 50px;
            background-color: rgb(132, 161, 152);
            color: #fff;
            font-size: 20px;
            line-height: 50px;
            text-align: center;
        }
        #alternate{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 80px;
            height: 80px;
            margin:auto;
            border-radius: 8px;
            background-color: bisque;
            text-align: center;
            line-height: 80px;
        }
        #tab-list{
            position: absolute;
            top:0;
            left: 100%;
            margin:0;
            display: none;
            padding:10px;
            width: 260px;
            background-color: bisque;
        }
        #tab-list > li{
            list-style: none;
            width: 100%;
        }
        #tab-list > li > p{
            padding:0;
            margin:0;
            width: 100%;
            line-height: 20px;
            color: #fff;
            text-align: center;
            /* background-color:rgb(134, 132, 132); */
        }
        #tab-list > li > span{
            display: inline-block;
            margin:15px;
            width: 50px;
            height: 30px;
            line-height: 30px;
            background-color: rgb(139, 174, 175);
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div id="con-box">
            <div id="swich-box">
                点击切换样式
            </div>
            <div id="alternate">大白鼠</div>
        </div>
        <ul id="tab-list"> 
            <li>
                <p>颜色</p>
                <span class="item1" href="">red</span>
                <span class="item1" href="">yellow</span>
                <span class="item1" href="">pink</span>
            </li>
            <li>
                <p>宽度</p>
                <span  class="item2" href="">100</span><span class="item2" href="">50</span><span class="item2" href="">150</span>
            </li>
            <li>
                <p>高度</p>
                <span class="item3" href="">50</span><span class="item3" href="">70</span><span class="item3" href="">120</span>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    //先获取要添加事件的dom元素
    var oSwich_box = document.getElementById("swich-box");
    var oTab = document.getElementById("tab-list");
    var aItem1 = document.getElementsByClassName("item1");
    var aItem2 = document.getElementsByClassName("item2");
    var aItem3 = document.getElementsByClassName("item3");
    var oAlter = document.getElementById("alternate");

    //给oSwich_box添加点击事件，
    oSwich_box.onclick = function(){
        oTab.style.display ="block";
    }

    for(let i = 0;i<aItem1.length;i++){
        aItem1[i].onclick = function(){
            var ohtml = aItem1[i].innerHTML;
            oAlter.style.backgroundColor = ohtml;
    }
}

    for(let i =0;i<aItem2.length;i++){
        aItem2[i].onclick = function(){
            var ohtml = aItem2[i].innerHTML;
            oAlter.style.width = ohtml + "px";
        }
    }

    for(let i =0;i<aItem3.length;i++){
        aItem3[i].onclick = function(){
            var ohtml = aItem3[i].innerHTML;
            oAlter.style.height = ohtml + "px";
        }
    }


    // console.log(aItem1)
</script>
</html>